<template>
  <div>
    <van-nav-bar
      fixed
      title="商品列表"
      left-arrow
      class="bg-primary color-white"
      @click-left="$utils.back($route.path)"
    />
    <div class="has-top has-bottom" style="height:100vh">
      <!-- 搜索栏 -->
      <top-search
        type="primary"
        :val="val"
        :area-show="areaShow"
        :input-style="inputStyle"
        @search="search"
      />
			<div class="scrollClass" v-if="catetype === 1">
        <van-tabs v-model="classActive" @click="tabClick">
          <van-tab v-for="(item,index) in classifyList" :key="item.id" :name="item.id">
            <template #title><img-box class="classImg" :img-url="item.Icon" /><div class="fs-22 fs-title text-show-line-1">{{item.name}}</div></template>
          </van-tab>
        </van-tabs>
        <div class="clickMore" @click.stop="classShow = true"><div>展</div><div>开</div><svg-icon icon-class="down2" @goPage="classShow = true" class="fs-28"/></div>
      </div>
      <!-- 商品分类及列表栏 -->
      <div class="flex list-content mt-20">
        <!-- 商品分类 -->
        <div class="flex-s-0 scoll-y">
					<tree :tree-data="secondClassifyList" v-if="catetype === 1 && secondClassifyList.length > 0" :active-id="activeId" @treeClickEvent="treeClickEvent" />
          <tree :tree-data="classifyList" v-else-if="catetype !== 1" :active-id="activeId" @treeClickEvent="treeClickEvent" />
        </div>
        <!-- 商品列表 -->
        <div id="scrollBox" ref="scrollBox" class=" bg-f9 flex-1 scoll-y">
          <productList :product-list="productList" list-type="quickPlaceOrder" @goDetailPage="goDetailPage" @updateCart="updateCart" @showSpec="showSpec" />
          <no-data v-if="productList.length === 0" />
          <p v-if="end===true&&productList.length!==0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
        </div>
      </div>
    </div>

    <!-- 底部栏购物车 -->
    <shopCart :car-list="carList" @cleanCart="cleanCart" @updateCart="carUpdateCart" />

    <!-- 商品详情弹窗 -->
    <van-popup v-model="detailShow" position="bottom" class="full-width full-height detail-page">
      <peoductDetail :detail-data="detailData" :evaluate-data="evaluateData" @clickLeft="clickLeft" @showOpt="showOpt" @changeAddress="changeAddress" />
    </van-popup>

    <!-- 商品规格选择弹窗 -->
    <van-popup v-model="optPopup.show" position="bottom" class="bottom-popup">
      <!--<ProductSpec v-show="optPopup.type==='attr'" :data="optPopup.data" :fresh="optPopup.change" :popup-type="optPopup.type" @closePopup="closePopup" @addCart="addCart" />-->
			<specTree v-show="optPopup.type==='attr'" :data="optPopup.data" :fresh="optPopup.change" :switch85="switch85" :switch203="switch203" :switch7="switch7" :popup-type="optPopup.type" @closePopup="closePopup" @addCart="addCart" />
		</van-popup>
		<!-- 分类选择弹窗 -->
		<van-popup v-model="classShow" position="top" :get-container="getContainer" >
      <div style="background: #fff;">
        <div class="flxedClassify">
				<div class="title">全部分类</div>
				<div class="topClassify topClassifyPop">
					<div v-for="(item,index) in classifyList" :key="item.id" @click="tabClickPop(item.id)" :class="{'active':classActive==item.id}">
						<img-box class="classImg" :img-url="item.Icon" />
						<span class="fs-22 text-show-line-1">{{item.name}}</span>
					</div>
				</div>
				<div class="flxedbottom" @click="classShow = false"><div style="margin-right: 10rpx;">点击收起</div></div>
			</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import imgBox from 'components/imgBox'
import TopSearch from 'components/Search'
import noData from 'components/noData'
import productList from 'components/productList'
import shopCart from 'components/shopCart'
import peoductDetail from 'components/productDetail'
import ProductSpec from 'components/productDetail/spec'
import tree from 'components/productList/tree'
import { GetProductTypeTree, GetWholeSaleListForSku, GetUserCarList, GetInintProductDetailInfo, AddOrUpdateAmount, GetCommentListByProduct, GetTagList, ProductBrandList } from 'api/product'
import { GetBusinessFunction } from 'api/businessSetting'
import specTree from 'components/productDetail/specTree'
export default {
  components: {
    TopSearch,
    noData,
    productList,
    shopCart,
    peoductDetail,
    ProductSpec,
    tree,
		imgBox,
		specTree
  },
  data() {
    return {
      // 搜索栏配置及数据
      areaShow: false,
      val: '',
      inputStyle: 'inputStyle-1',

      // tab
      activeTabIndex: 0,
      tabItems: [{ name: '综合' }, { name: '常购' }, { name: '收藏' }, { name: '促销' }],

      // 筛选栏配置及数据
      filterIndex: -1,
      filterDataList: [
        { title: '品牌', check: false },
        { title: '标签', check: false },
        { title: '排序', check: false }
      ],
      filterPopShow: false,
      brandList: [], // 品牌列表
      newBrandList: [],
      oldBrandIds: '',
      newBrandIds: '',
      tagList: [], // 标签列表
      newTagList: [],
      displayData: {}, // 整体显示设置
      priceDecimalPlaces: 2,
      oldTagIds: '',
      newTagIds: '',
      sortList: [ // 排序方式列表
        {
          name: '默认排序',
          OrderBy: 'AddTime',
          Sort: 'desc'
        }, {
          name: '价格从低到高',
          OrderBy: 'grade_price',
          Sort: 'asc'
        }, {
          name: '价格从高到低',
          OrderBy: 'grade_price',
          Sort: 'desc'
        }, {
          name: '编码从低到高',
          OrderBy: 'product_code',
          Sort: 'asc'
        }, {
          name: '编码从高到低',
          OrderBy: 'product_code',
          Sort: 'desc'
        }
      ],
      sortActiveIndex: 0,

      // 分类栏配置及数据
      activeId: -1,
      classifyList: [],
			secondClassifyList: [],
      initClassify: true, // 是否需要初始化分类

      // 商品列表
      productList: [],
      updateList: true, // 是否需要更新商品列表

      // 购物车数据
      carList: [],

      // 商品详情
      detailData: {},
      oldID: 0,
      detailShow: false,

      detailIndex: -1,
      SpecIndex: -1,

      // 评价数据
      evaluateData: {},

      // 收货地址
      addressList: [],

      // sku 商品规格弹窗
      optPopup: {
        data: {},
        type: '',
        change: false,
        show: false
      },

      cartRequestList: [],

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      scollTop: 0,
      end: false,

      // 请求参数
      requestData: {
        ProductType: 1,
        OrderBy: 'AddTime',
        sort: 'desc',
        PageIndex: 1,
        PageSize: 10
      },

      commentRequest: {
        page: 1,
        size: 3
      },
			catetype: 1,
      classActive: 0,
			classShow: false,
			switch203:0,
			switch85:0,
			switch7: 0, // 微商下单不限制库存
    }
  },
  created() {
		if(this.$route.query.cateId){
			this.classActive = parseInt(this.$route.query.cateId)
		}
    console.log(this.$route.query)
    if (this.$route.query) {
      const _query = this.$route.query
      if (_query.infoType) {
        this.activeTabIndex = Number(_query.infoType)
        this.requestData.infoType = Number(_query.infoType)
      }
      if (_query.TagIds) {
        this.requestData.TagIds = Number(_query.TagIds)
      }
    }
    this.GetTagList()
    this.GetProductBrandList()
    this.GetUserCarList()
		this.GetBusinessFunction()
  },
  mounted() {
    this.$nextTick(function() {
      document.querySelector('#scrollBox').addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
		GetBusinessFunction(){
      GetBusinessFunction(203).then(res => {
        if (res) {
          this.switch203 = res.Data[0].Value;
        }
      })
      GetBusinessFunction(85).then(res => {
        if (res) {
          this.switch85 = res.Data[0].Value;
        }
      })
			GetBusinessFunction(7).then(res => {
        if (res) {
          this.switch7 = res.Data[0].Value;
        }
      })
    },
		tabClick(num){
        this.classActive = num
				var index = 0
				for(var i=0;i<this.classifyList.length;i++){
					if(this.classifyList[i].id === num){
						index = i
					}
				}
				this.classifyListFn(this.classifyList[index])

    },
		tabClickPop(num){
      this.classActive = num
			var index = 0
			for(var i=0;i<this.classifyList.length;i++){
				if(this.classifyList[i].id === num){
					index = i
				}
			}
			this.classifyListFn(this.classifyList[index])
      this.classShow = false
    },
		classifyListFn(item){
      this.secondClassifyList = []
      if (item.children && item.children.length > 0) {
				const totalClassify = {
					OrderBy: item.OrderBy,
					id: item.id,
					name: '全部',
					parent_id: item.parent_id,
					parent_path: item.parent_path,
					type_id: item.type_id
				}
      	this.secondClassifyList.push(totalClassify)
        item.children.forEach((item) => {
          this.secondClassifyList.push(item)
        })
				
      }
      this.activeId = item.id
      this.requestData.typePath = item.parent_path
      this.productList = []
      this.GetWholeSaleListForSku()
    },
		getContainer() {
      return document.querySelector('.scrollClass');
    },
    // 关键字搜索商品
    search(key) {
      console.log(key)
      this.resetParams()
      this.requestData.search = key
      this.GetWholeSaleListForSku()
    },

    showOpt(type) {
      console.log(type)
      if (this.detailIndex !== this.SpecIndex) {
        this.optPopup.data = this.productList[this.detailIndex]
      }
      this.optPopup.type = type
      this.optPopup.show = true
    },

    // 重置请求参数及数据
    resetParams() {
      this.requestData.PageIndex = 1
      this.requestData.PageSize = 10
      this.scollRequest = true
      this.scollTop = 0
      this.end = false
      this.productList = []
    },
    // 点击分类事件
    treeClickEvent(item, treeItem) {
      if (this.activeId !== item.id) {
        this.activeId = item.id
        this.resetParams()
        this.requestData.typePath = item.parent_path
        this.GetWholeSaleListForSku()
      }
    },
    // 点击tab
    clickTab(activeTabIndex) {
      this.activeTabIndex = activeTabIndex
      this.resetParams()
      this.requestData.infoType = activeTabIndex
      // 获取数据
      this.GetWholeSaleListForSku()
    },

    // 修改筛选条件
    changeFilter(index) {
      if (index === 0) {
        this.newBrandList = JSON.parse(JSON.stringify(this.brandList))
      } else if (index === 1) {
        this.newTagList = JSON.parse(JSON.stringify(this.tagList))
      }
      this.$forceUpdate()
      this.filterPopShow = true
      this.filterIndex = index
    },

    // 修改品牌筛选
    changeBrand(index) {
      if (this.newBrandList[index].checked) {
        this.newBrandIds = this.newBrandIds.replace((this.newBrandList[index].Id + ','), '')
      } else {
        this.newBrandIds += this.newBrandList[index].Id + ','
      }
      this.newBrandList[index].checked = !this.newBrandList[index].checked
      this.$forceUpdate()
    },
    // 修改标签筛选
    changeTag(index) {
      if (this.newTagList[index].checked) {
        this.newTagIds = this.newTagIds.replace((this.newTagList[index].Id + ','), '')
      } else {
        this.newTagIds += this.newTagList[index].Id + ','
      }
      this.newTagList[index].checked = !this.newTagList[index].checked
      this.$forceUpdate()
    },
    // 重置
    cleanFilter(index) {
      if (index === 0) {
        this.newBrandIds = ''
        this.setChecked(this.newBrandList)
      } else if (index === 1) {
        this.newTagIds = ''
        this.setChecked(this.newTagList)
      }
      this.$forceUpdate()
    },
    // 确认
    confirmFilter(index) {
      let needUpdate = false
      if (index === 0) {
        if (this.oldBrandIds !== this.newBrandIds) {
          this.oldBrandIds = this.newBrandIds
          this.brandList = JSON.parse(JSON.stringify(this.newBrandList))
          if (this.oldBrandIds.indexOf(',')) {
            this.requestData.BrandIds = this.oldBrandIds.substr(0, this.oldBrandIds.length - 1)
          }
          if (this.oldBrandIds !== '') {
            this.filterDataList[index].check = true
          } else {
            this.filterDataList[index].check = false
          }
          needUpdate = true
        }
      } else if (index === 1) {
        if (this.oldTagIds !== this.newTagIds) {
          this.oldTagIds = this.newTagIds
          this.tagList = JSON.parse(JSON.stringify(this.newTagList))
          if (this.oldTagIds.indexOf(',')) {
            this.requestData.TagIds = this.oldTagIds.substr(0, this.oldTagIds.length - 1)
          }
          if (this.oldTagIds !== '') {
            this.filterDataList[index].check = true
          } else {
            this.filterDataList[index].check = false
          }
          needUpdate = true
        }
      }
      if (needUpdate) {
        this.resetParams()
        this.GetWholeSaleListForSku()
      }
      this.filterPopShow = false
      this.filterIndex = -1
    },
    closeFilterPop() {
      this.filterPopShow = false
      this.filterIndex = -1
    },
    // 列表checked
    setChecked(arr, bool = false) {
      if (arr && arr.length > 0) {
        arr.forEach(item => {
          item.checked = bool
        })
      }
    },
    // 修改排序方式
    changeSortType(index) {
      if (this.sortActiveIndex !== index) {
        this.resetParams()
        this.sortActiveIndex = index
        this.requestData.OrderBy = this.sortList[index].OrderBy
        this.requestData.Sort = this.sortList[index].Sort
        this.GetWholeSaleListForSku()
      }
      this.filterDataList[2].check = !(this.sortActiveIndex === 0)
      this.filterPopShow = false
      this.filterIndex = -1
    },

    // 打开商品详情弹窗
    goDetailPage(item, index) {
      this.detailIndex = index
      const id = item.ID
			this.$router.push('/quickPlaceOrder/retailDetail/' + item.ID)
			//if (id === this.oldID) {
      //  this.detailShow = true
      //} else {
      //  this.oldID = id
      //  this.GetCommentListByProduct(id)
      //  this.GetInintProductDetailInfo(id)
      //}
    },
    showSpec(item, index) {
      console.log(item)
      this.SpecIndex = index
      this.optPopup.type = 'attr'
      this.optPopup.data = item
      this.optPopup.show = true
    },
    updateCart(item) {
      const _obj = {}
      _obj.ProductId = item.ID
      _obj.Amount = item.Amount
      _obj.SkuId = item.ProductSkuList[0].ID
      this.cartRequestList = []
      this.cartRequestList.push(_obj)
      this.AddOrUpdateAmount()
    },
    changeAddress(address) {
      console.log(999)
      this.detailData.UserAddress = address
      // this.$forceUpdate()
    },

    // 规格弹窗组件方法
    addCart(arr) {
      console.log(arr)
      this.cartRequestList = arr
      if (this.cartRequestList.length <= 0) {
        this.$toast.fail('请选择商品')
        return
      }
      this.AddOrUpdateAmount()
    },
    closePopup() {
      this.optPopup.show = false
    },
    searchAdress() {},

    // 底部购物车组件方法
    cleanCart() {
      this.carList = []
      this.optPopup.change = !this.optPopup.change
      this.changeArr(this.productList, false)
    },
    carUpdateCart(bool) {
      if (bool) {
        this.GetUserCarList()
      } else {
        this.changeArr(this.productList, false)
      }
    },

    // 详情弹窗方法
    clickLeft() {
      this.detailShow = false
    },

    // 整理数据
    changeArr(Arr, isNew) {
      const _this = this
      console.log(this)
      Arr.forEach(item => {
        // 图片列表
        if (item.ImageUrl) {
          const ImgUrlList = _this.$utils.strToArr(item.ImageUrl)
          item.logo = ImgUrlList[0]
        }
        item.BaseUnit = item.DefaultUnit
        // 单位列表
        if (item.Unit && item.Unit.indexOf(',') !== -1) {
          item.UnitList = item.Unit.split(',')
          item.BaseUnit = item.UnitList[0]
        }
        // 换算比例列表
        if (item.Unitratio && item.Unitratio.indexOf(':') !== -1) {
          item.UnitratioList = item.Unitratio.split(':')
        }
        // 按单限购
        if (item.ProductSkuList && item.ProductSkuList.length === 1) {
          item.oLimitBuy = item.ProductSkuList[0].LimitBuy
        }
        // 购物车数量（同步）
        if (_this.carList && _this.carList.length > 0) {
          const _list = _this.carList
          for (let i = 0; i < _list.length; i++) {
            if (_list[i].ProductId === item.ID) { // 判断购物车中的商品是否为当前商品
              if (item.ProductSkuAttrList && item.ProductSkuAttrList.length > 1) { // 多规格商品
                for (let j = 0; j < item.ProductSkuAttrList.length; j++) {
                  if (item.ProductSkuAttrList[j].SkuList && item.ProductSkuAttrList[j].SkuList.length > 0) {
                    for (let k = 0; k < item.ProductSkuAttrList[j].SkuList.length; k++) {
                      if (_list[i].SkuId === item.ProductSkuAttrList[j].SkuList[k].ID) {
                        item.ProductSkuAttrList[j].SkuList[k].Amount = _list[i].Amount
                        console.log('匹配成功')
                        break
                      }
                    }
                  }
                }
              } else { // 单规格商品
                console.log('同步单规格')
                item.Amount = _list[i].Amount
                break
              }
            } else {
              item.Amount = 0
            }
          }
        } else {
          item.Amount = 0
          if (item.ProductSkuAttrList && item.ProductSkuAttrList.length > 0) { // 多规格商品
            for (let j = 0; j < item.ProductSkuAttrList.length; j++) {
              if (item.ProductSkuAttrList[j].SkuList && item.ProductSkuAttrList[j].SkuList.length > 0) {
                for (let k = 0; k < item.ProductSkuAttrList[j].SkuList.length; k++) {
                  item.ProductSkuAttrList[j].SkuList[k].Amount = 0
                }
              }
            }
          }
        }
        if (isNew) {
          _this.productList.push(item)
        }
      })
    },

    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (this.$utils.getScrollHeight('scrollBox') - this.$utils.getClientHeight('scrollBox') - this.$utils.getScrollTop('scrollBox') <= 5) {
          _this.scollRequest = false
          // alert('触发！！！')
          console.log('加载')
          _this.scollTop = this.$utils.getScrollTop('scrollBox')
          if (_this.requestData.PageIndex < _this.totalAmout) {
            _this.requestData.PageIndex++
            _this.GetWholeSaleListForSku()
          } else {
            console.log('end')
            _this.end = true
          }
          // }
        }
      }
    },

    // 获取门店商品分类列表
    GetProductTypeTree() {
      GetProductTypeTree({ parent_path: '_0_2_', InfoType: 1 }).then((res) => {
        if (res) {
          this.initClassify = false
          this.classifyList = []
          const totalClassify = {
            OrderBy: res.Data.OrderBy,
            id: res.Data.id,
            name: res.Data.name,
            parent_id: res.Data.parent_id,
            parent_path: res.Data.parent_path,
            type_id: res.Data.type_id,
						Icon:this.$webInfo.ShopLogo
          }
          this.classifyList.push(totalClassify)
          if (res.Data.children && res.Data.children.length > 0) {
            res.Data.children.forEach((item) => {
              this.classifyList.push(item)
            })
          }
          this.activeId = res.Data.id
					if(this.classActive !== 0){
						var index = 0
						for(var i=0;i<this.classifyList.length;i++){
							if(this.classifyList[i].id === this.classActive){
								index = i
							}
						}
						this.classifyListFn(this.classifyList[index])
					}else{
						this.requestData.typePath = res.Data.parent_path
						this.productList = []
						this.GetWholeSaleListForSku()
					}
          
        }
      })
    },

    // 获取商品列表
    GetWholeSaleListForSku() {
      const _this = this
      GetWholeSaleListForSku(_this.requestData).then(res => {
        if (res) {
          if (res.Data.Data.length && res.Data.Data.length > 0) {
            console.log('购物车数据')
            console.log(_this.carList)
            console.log(res.Data.Data)
            this.changeArr(res.Data.Data, true)
            _this.totalAmout = res.Data.TotalAmout
            _this.scollRequest = true
            if (_this.scollTop > 0) {
              _this.$refs.scrollBox.scrollTo(0, _this.scollTop)
            }
          }
        }
      })
    },

    // 获取购物车列表
    GetUserCarList() {
      GetUserCarList({ priceType: 1 }).then(res => {
        if (res) {
          this.carList = res.Data
          if (this.initClassify) {
            this.GetProductTypeTree()
          } else if (this.updateList) {
            this.changeArr(this.productList, false)
          }
        }
      })
    },

    // 获取商品详情
    GetInintProductDetailInfo(id) {
      GetInintProductDetailInfo({ productId: id, InfoType: 1 }).then(res => {
        if (res) {
          this.detailData = res.Data
          this.detailData.imgList = res.Data.ProductInfo.ImageUrl.split(',')
          this.detailShow = true
        }
      })
    },

    // 更新购物车
    AddOrUpdateAmount() {
      AddOrUpdateAmount(this.cartRequestList).then(res => {
        if (res) {
          console.log(res)
          this.optPopup.show = false
          this.updateList = false
          this.GetUserCarList()
        }
      })
    },

    // 获取评价
    GetCommentListByProduct(id) {
      this.commentRequest.product_id = id
      GetCommentListByProduct(this.commentRequest).then(res => {
        if (res) {
          console.log(res)
          this.evaluateData = res.Data
        }
      })
    },
    // 获取标签列表
    GetTagList() {
      const _this = this
      GetTagList().then(res => {
        if (res && res.Data && res.Data.length > 0) {
          _this.tagList = res.Data
          _this.tagList.forEach((item, index) => {
            item.checked = false
            if (_this.requestData.TagIds == item.Id) {
              item.checked = true
              _this.newTagIds = _this.requestData.TagIds + ','
              _this.oldTagIds = _this.newTagIds
              _this.filterDataList[1].check = true
            }
          })
        }
      })
    },
    // 获取品牌列表
    GetProductBrandList() {
      ProductBrandList().then(res => {
        if (res) {
          this.brandList = res.Data
          this.brandList.forEach(item => {
            item.checked = false
          })
        }
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.color-white{
  /deep/.van-icon{
    color:#fff;
  }
  /deep/.van-nav-bar__title{
    color:#fff;
  }
}
.list-content{
  height: calc(100% - 170px);
}

// 以上修整完成
.scoll-y {
  overflow-y: scroll;
}
.classifyItem {
  width: 200px;
}
.activeIndex {
  background: $colorF;
  position: relative;
  &:before {
    content: '';
    height: calc(100% - 40px);
    width: 8px;
    @include bg-primary();
    position: absolute;
    top: 20px;
    left: 0;
    border-radius: 0 8px 8px 0;
  }
}
.van-popup{
  background: transparent;
}
.detail-page{
  background: $colorF5;
}

.tab-bar {
  display: flex;

  flex-direction: row;
  background: $colorF;
  padding: 20px 0;
  .tab-item {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .teb-item-text {
      display: flex;
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .teb-item-border {
      display: flex;
      width: 80px;
      height: 6px;
      border-radius: 3px;
      background: rgba($color: #000000, $alpha: 0);
    }
  }
  .activeBorder {
    .teb-item-text {
      @include color-primary;
    }
    .teb-item-border {
      @include bg-primary();
    }
  }
}
.filter-tab {
  display: flex;
  flex-direction: row;
  position: relative;
  padding: 10px 24px 20px;
  .filter-item {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    width: calc(33% - 15px);
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    height: 54px;
    background: $colorF4;
    border: solid 1px $colorF4;
  }
  .filter-checked{
    @include color-primary;
    background: $colorF;
    @include border-primary;
  }
  .filter-active{
    background: transparent;
    color:#000 !important;
    position: relative;
    @include border-primary;
    &:after{
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      @include color-primary;
      @include bg-primary;
      opacity: 0.1;
      border-radius: 10px;
    }
  }
  .change-theme {
    background: $colorF;
    border: solid 1px #171817;
  }
  .filter-pop{
    position: absolute;
    z-index: $zIndexPopup;
    top: 84px;
    left: 0;
    width: 100%;
    height: calc(100vh - 370px);
    .filter-cover{
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width:100%;
      background:$colorOverlay;
    }
    .filter-pop-content{
      position: relative;
      background: $colorF;
      .filter-pop-item-box{
        padding:40px 24px 50px;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        .filter-pop-item{
          flex-shrink: 0;
          flex-grow: 0;
          position: relative;
          width: calc(33.33% - 14px);
          margin-right: 20px;
          margin-bottom: 20px;
          text-align: center;
          line-height: 72px;
          padding: 0 20px;
          background: $colorF4;
          border: solid 1px $colorF4;
          border-radius: 6px;
          &:nth-child(3n){
            margin-right: 0px;
          }
        }
        .filter-selected{
          @include color-primary;
          border-color: currentColor;
          &:before,&:after{
            content: '';
            position: absolute;
          }
          &:before{
            background: currentColor;
            width: 54px;
            height: 54px;
            border-radius: 100%;
            bottom: -27px;
            right: -27px;
          }
          &:after{
            width: 6px;
            height: 12px;
            border: 5px solid;
            border-color: transparent $colorF $colorF  transparent ;
            transform: rotate(45deg);
            bottom: 6px;
            right: 4px;
          }
        }
      }
      .filter-pop-item-box-1{
        padding:30px 24px 40px;
        font-size: 26px;
        .filter-pop-item-1{
          padding: 30px 0;
        }
        .item-checked{
          position: relative;
          @include color-primary;
          &:after{
             content: '';
            position: absolute;
            width: 6px;
            height: 18px;
            border: 5px solid;
            border-color: transparent currentColor currentColor  transparent ;
            transform: rotate(45deg);
            bottom: 40px;
            right: 10px;
          }
        }
      }
      .filter-bottom{
        padding: 32px 24px;
        position: relative;
        .btn{
          width: calc(50% - 20px);
          line-height: 72px;
          border-radius: 8px;
        }
      }
    }
  }
}
.zIndexBottom{
  z-index: $zIndexHeader;
}


.classImg{
  width: 96px;
  height: 96px;
  border-radius: 15px;
  border: 2px solid #FFFCFC;
  margin-bottom: 6px;
  overflow: hidden;
}
/deep/.van-tab--active{
  font-weight: bold;
}
/deep/.van-tabs__line{
  display: none;
}
/deep/.van-tabs__wrap{
  height: 75px;
  padding-right: 20px;
}
/deep/.van-tab{
  text-align: center;
}
.scrollClass{
  padding-top: 10px;
  position: relative;
  background: #fff;
  box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.07);
  .clickMore{
    position: absolute;
    width: 66px;
    height: 100%;
    top: 0;
    right: 0;
    background: #fff;
    display: flex;
    font-weight: bold;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .fs-title{
    width: 96px;
  }
}
.flxedClassify{
	background: #fff;
  .topClassify{
		display: flex;
		justify-content: flex-start;
		height: 154px;
		background: #FFFCFC;
		padding:0 0px 0 8px;
		div{
			color: #666666;
			font-size: 24px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			white-space: nowrap;
			margin: 0 22px;
			.classImg{
				width: 96px;
				height: 96px;
				border-radius: 30px;
				border: 2px solid #FFFCFC;
				margin-bottom: 6px;
			}
		}
		.active{
			.classImg{
				    @include border-primary;
			}
			span{
        @include color-primary;
				font-weight: bold;
			}
			
		}
		&>div:last-child{
			padding-right: 106px!important;
		}
	}
	
	.topClassifyPop{
		height:auto;
		flex-wrap: wrap;
		div{
			margin-bottom:24px;
		}
		&>div:last-child{
			padding-right:0px!important;
		}
	}
	.title{
		padding:30px 40px 30px 40px;
		font-weight: bold;
	}
	.flxedbottom{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 24px;
	}
}
</style>
